<template>
	<view class="content-f">
		<view class="bj">
			<view class="top253"></view>
			<view class="login-top">
				<view class="flex-column">
					<view class="flex-row">
						<view class="login-header-txt">登录</view>
						<view class="login-header-img"></view>
					</view>
					<view class="flex-column inputs">
						<view class="login-input">
							<input class="login-input-one" v-model="form.mobile" placeholder="请输入手机号" placeholder-class="login-input-p"/>
						</view>
					</view>
					<view class="flex-column inputs-1">
						<view class="login-input flex-row flex-content-between">
							<input class="login-input-one" v-model="form.mobile_code" placeholder="请输入验证码" placeholder-class="login-input-p"/>
							<view class="yzm">{{codeTxt}}</view>
						</view>
					</view>
					<view class="flex-row flex-content-between foot">
						<view @tap="goforgetPass"></view>
						<view @tap="goLogin">密码登录</view>
					</view>
					<view class="flex-row flex-content-center">
						<view class="flex-column btn">
							<view>登录</view>
							<view>一键登录</view>
						</view>
					</view>
				</view>
			</view>
			<mu-suspension bottom="110">
				<view class="login-foot">
					<view class="flex-row">
						<image @tap="changeYuedu" class="login-foot-img" :src="yuedu?`../../static/order/ok.png`:`../../static/order/not.png`" mode="scaleToFill"></image>
						<view class="login-foot-txt">我已阅读并同意<text>《服务协议》</text>和<text>《隐私政策》</text></view>
					</view>
				</view>
			</mu-suspension>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				codeTxt:"获取验证码",//获取验证码的文字
				yuedu:true,//是否已阅读协议
				form:{//提交的数据
					mobile:"",
					mobile_code:""
				}
			}
		},
		methods:{
			//跳转到忘记密码
			goforgetPass(){
				uni.navigateTo({
					url:'/pages/user/forget_pass'
				})
			},
			//跳转到验证码登录
			goLogin(){
				uni.navigateTo({
					url:'/pages/user/login'
				})
			},
			//修改阅读状态
			changeYuedu(){
				this.yuedu = !this.yuedu
			}
		}
	}
</script>

<style lang="scss">
	.yzm{
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: $default-button-color;
	}
	.login-foot-txt{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-left: 12rpx;
		>text{
			color: #333333;
		}
	}
	.login-foot-img{
		width: 32rpx;
		height: 32rpx;
		margin-left: 62rpx;
	}
	.login-foot{
		width: 750rpx;
		// height: 110rpx;
		// background-color: #69D330;
	}
	.btn{
		margin-top: 120rpx;
		>view:nth-child(1){
			width: 610rpx;
			height: 88rpx;
			background: $default-button-color;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			opacity: 1;
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
		>view:nth-child(2){
			width: 610rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			opacity: 1;
			border: 1rpx solid $default-button-color;
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: $default-button-color;
			margin-top: 24rpx;
		}
	}
	.foot{
		margin-top: 32rpx;
		>view{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
	.login-input-one{
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
	}
	.login-input-p{
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.inputs{
		margin-top: 100rpx;
	}
	.inputs-1{
		margin-top: 70rpx;
	}
	.login-input{
		height: 72rpx;
		width: 610rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.login-header-img{
		width: 10rpx;
		height: 10rpx;
		opacity: 1;
		border: 5rpx solid #69D330;
		border-radius: 20rpx;
		margin-left: 16rpx;
	}
	.login-header-txt{
		font-size: 56rpx;
		font-family: Source Han Serif CN-Bold, Source Han Serif CN;
		font-weight: bold;
		color: #333333;
	}
	.login-top{
		margin-left: 70rpx;
		margin-right: 70rpx;
	}
	.top253{
		width: 100%;
		height: 253rpx;
	}
	.bj{
		width: 100%;
		height: 100vh;
		/* #ifdef MP */
		background-image: url('http://ws.facai.maowenke.cn/img/loginbj.png');
		/* #endif */
		/* #ifndef MP */
		background-image: url('../../static/user/loginbj.png');
		/* #endif */
		background-size: 100%;
	}
</style>